import React from 'react'
import { connect } from 'dva'
import { mapStateToProps } from 'utils/view_utils'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import PopUpSelect from 'widget/PopUpSelectnoModal/PopUpSelect'
import { isEmpty, cloneDeep, } from 'lodash'
import cx from 'classnames'
import Uploader from 'widget/Upload'
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { Form, Input, Select, Checkbox , Row, Col, Button, DatePicker, Radio  } from 'antd';
// import { message,DatePicker} from 'antd';
import moment from 'moment';
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
import 'moment/locale/zh-cn';
import { number } from 'prop-types'
moment.locale('zh-cn');
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select
const routeView = function ({ dispatch, model, form }) {
    const { modelObj, namespace } = model
    const { getFieldDecorator } = form
    let { title, categoryList, query, detail, actionType, images} = modelObj
    //console.log('selectItem',selectItem)
    // PopUpSelect 需要row配置

    const formItemLayout = {
        labelCol: {
            span: 1,

        },
        wrapperCol: {
            span: 16
        },
    }
    const imageLayout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 },
    }
    function removeImgUrl(inx, origin){
        if(origin == 'images'){
            images.splice(inx ,1)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { images }
            })
        }else if(origin == 'houseTypeImage'){
            houseTypeImage.splice(inx ,1)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { houseTypeImage }
            })
        }else if(origin == 'outerImage'){
            outerImage.splice(inx ,1)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { outerImage }
            })
        }
    }
    function updateImageModel(url, origin){
        if(origin == 'images'){
            images.push(url)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { images }
            })
        }else if(origin == 'houseTypeImage'){
            houseTypeImage.push(url)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { houseTypeImage }
            })
        }else if(origin == 'outerImage'){
            outerImage.push(url)
            dispatch({
                type: `${namespace}/updateStore`,
                payload: { outerImage }
            })
        }
    }

    function updateKey(value, key){
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { key: value}
        })
    }

    function updateModel(value, key, obj){
        detail[key] = value
        dispatch({
            type: `${namespace}/updateStore`,
            payload: { detail }
        })
    }

    function inputChange(val, type) {
        console.log(val)
        detail[type] = val
        dispatch({
          type: `${namespace}/updateModel`,
          payload: { detail }
        });
    }
    function getCategoryOption() {
        if (categoryList) {
          return categoryList.map((item, idx) =>
            <Select.Option key={idx} value={item.id}>{item.category}</Select.Option>
          )
        } else {
          return null
        }
    }

    //选择角色

    //date改变时
    return (
        <div className={cx('public_listMain')}>
            <div className="functionButton">
                {actionType == 'check' ? (<Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                    hashHistory.push('/home/businessAdmin/lifeService')
                    
                }} >返回</Button>): <Button type='primary' loading={modelObj.btnLoading} onClick={() => {
                    form.validateFields((err) => {
                        if(!err){
                            if (actionType == 'add'){
                                dispatch({
                                    type: `${namespace}/createLifeService`,
                                    payload: {detail}
                                })
                            }else if(actionType == 'edit'){
                                dispatch({
                                    type: `${namespace}/updateLifeService`,
                                    payload: {detail}
                                })
                            }
                        }
                    });

                }} >保存</Button> }
            </div>
            <CollapsiblePanels title={title} hideUpDownBtn={true}  >
                <Form autoComplete="off" className="auto-wrap" >

                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="服务名称" labelCol={{ span: 5 }}>
                                <div>
                                    {getFieldDecorator('name', {
                                        initialValue: detail.name,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入服务名称' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入服务名称'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        maxLength={50}
                                        onChange={(e) => { updateModel(e.target.value, 'name', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="地址" labelCol={{ span: 5 }}>
                                <div>
                                    {getFieldDecorator('address', {
                                        initialValue: detail.address,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入地址' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入地址'}
                                        autoComplete={'off'}
                                        disabled={actionType == 'check'}
                                        maxLength={100}
                                        onChange={(e) => { updateModel(e.target.value, 'address', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                        
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="是否认证" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('verify', {
                                        initialValue: detail.verify,
                                        rules: [
                                            { required: true, whitespace: true, message: '请选择认证情况',pattern: new RegExp(/^[a-zA-Z0-9_]+$/) },
                                        ],
                                        })(<Radio.Group value={detail.verify} disabled={actionType == 'check'} onChange={(e) => { updateModel(e.target.value, 'verify', 'detail') }}>
                                            <Radio value={0}>否</Radio>
                                            <Radio value={1}>是</Radio>
                                          </Radio.Group>)}
                                </div>
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label="联系方式" labelCol={{ span: 5 }}>
                                <div className={cx('select-item-contain')}>
                                    {getFieldDecorator('mobile', {
                                        initialValue: detail.mobile,
                                        rules: [
                                            { required: true, whitespace: true, message: '请输入联系方式' },
                                        ],
                                        })(<Input
                                        placeholder={'请输入联系方式'}
                                        disabled={actionType == 'check'}
                                        autoComplete={'off'}
                                        type="number"
                                        onChange={(e) => { updateModel(e.target.value, 'mobile', 'detail') }}
                                    />)}
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label='服务分类' labelCol={{ span: 5 }} >
                                {getFieldDecorator('categoryId', {
                                initialValue: detail.categoryId,
                                rules: [
                                    { required: false, whitespace: true, message: '请先选择服务分类' },
                                ],
                                })(
                                <Select
                                    placeholder={"请先选择服务分类"}
                                    disabled={actionType == 'check'}
                                    onChange={(e) => inputChange(e, 'categoryId')}>
                                    {getCategoryOption()}
                                </Select>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem {...imageLayout} label="封面"
                                            style={{ marginLeft: "8.33333333%" }}>
                                    <Uploader uploadedUrls ={images}
                                                removeFileCbf={(index)=>{removeImgUrl(index,'images')}}
                                                uploadSuccessCbf={ (imgUrl) => {updateImageModel(imgUrl, 'images')} }
                                                showType={actionType == 'check'?'4':'3'}
                                                fileType='image'
                                                fileMaxSize='0.5'
                                                minCropBoxWidth={1500}
                                                minCropBoxHeight={3000}
                                                maxFiles='1' />
                                </FormItem>
                        </Col>
                </Row>
                </Form>
            </CollapsiblePanels>
        </div>

    )


}
export default connect(mapStateToProps)(Form.create()(routeView))

